<script lang="ts" setup>
	import { ref } from 'vue';
	import agreement from '@/pages/agreement/index.vue';
	import policyAgree from '@/pages/agreement/policy-agree.vue';
	
	// 服务协议弹窗组件实例
	const serviceAgreementPopup = ref()
	
	// 隐私政策弹窗组件实例
	const privacyPolicyPopup = ref()

	/**
	 * 显示服务协议弹窗
	 */
	const showServiceAgreementPopup = () => {
		if (serviceAgreementPopup.value) {
			serviceAgreementPopup.value.open()
		}
	};

	/**
	 * 隐藏服务协议弹窗
	 */
	const hideServiceAgreementPopup = () => {
		if (serviceAgreementPopup.value) {
			serviceAgreementPopup.value.close()
		}
	};

	/**
	 * 显示隐私政策弹窗
	 */
	const showPrivacyPolicyPopup = () => {
		if (privacyPolicyPopup.value) {
			privacyPolicyPopup.value.open()
		}
	};

	/**
	 * 隐藏隐私政策弹窗
	 */
	const hidePrivacyPolicyPopup = () => {
		if (privacyPolicyPopup.value) {
			privacyPolicyPopup.value.close()
		}
	};
	
	/**
	 * icp点击事件
	 */
	const onIcpClick = () => {
		// #ifdef H5
		window.location.href = 'https://beian.miit.gov.cn/#/home';
		// #endif
		
		// #ifdef APP-PLUS
		plus.runtime.openURL('https://beian.miit.gov.cn/#/home');
		// #endif
	}
</script>

<template>
	<view class="privacy-policy-service-agreement-container">
		<view class="privacy-policy-service-agreement">
			<text class="service-agreement" @click="showServiceAgreementPopup">《服务协议》</text>
			<text class="divider">|</text>
			<text class="privacy-policy" @click="showPrivacyPolicyPopup">《隐私政策》</text>
		</view>
		<view class="icp-filing-number" @click="onIcpClick">ICP备案信息：浙ICP备2022037079号-3A ></view>
	</view>
	
	<uni-popup ref="serviceAgreementPopup">
		<view
			class=""
			style="
				margin: 40rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
			"
		>
			<view class="" style="height: 70vh; overflow-y: auto">
				<agreement></agreement>
			</view>
			<view
				class="btn"
				style="
					font-size: 28rpx;
					margin-top: 20rpx;
					border: 1px solid #eee;
					padding: 12rpx 24rpx;
					border-radius: 10rpx;
				"
			>
				<view @click="hideServiceAgreementPopup">关闭</view>
			</view>
		</view>
	</uni-popup>
	<uni-popup ref="privacyPolicyPopup">
		<view
			class=""
			style="
				margin: 40rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
			"
		>
			<view class="" style="height: 70vh; overflow-y: auto">
				<policyAgree></policyAgree>
			</view>
			<view
				class="btn"
				style="
					font-size: 28rpx;
					margin-top: 20rpx;
					border: 1px solid #eee;
					padding: 12rpx 24rpx;
					border-radius: 10rpx;
				"
			>
				<view @click="hidePrivacyPolicyPopup">关闭</view>
			</view>
		</view>
	</uni-popup>
</template>

<style scoped lang="scss">
	.privacy-policy-service-agreement-container {
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		row-gap: 12rpx;

		.privacy-policy-service-agreement,
		.icp-filing-number {
			text-align: center;

			.privacy-policy,
			.service-agreement {
				color: #007cff;
			}

			.divider {
				color: #e5e5e5;
			}
		}

		.icp-filing-number {
			color: #999;
		}
	}
</style>
